import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import viteCompression from 'vite-plugin-compression' // gzip 压缩插件
import fs from 'fs'
import path from 'path'
import { visualizer } from 'rollup-plugin-visualizer'
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import postCssPxToRem from 'postcss-pxtorem'

const distPath = path.resolve(__dirname, 'dist')

// 构建开始前清理 dist 目录
if (fs.existsSync(distPath)) {
  console.log('清理 dist 目录...')
  fs.rmSync(distPath, { recursive: true, force: true })
  console.log('dist 目录清理完成')
}

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production'
  console.log('当前 mode:', mode)

  return {
    configureWebpack: {
      output: {
        library: 'MyLibrary', // 库的名称
        libraryTarget: 'umd', // 使用 UMD 格式
        filename: 'my-library.umd.js' // 输出文件名
      }
    },
    plugins: [
      // API 自动导入
      AutoImport({
        // 导入 Vue 函数，如：ref, reactive, toRef 等
        imports: ['vue', '@vueuse/core', 'pinia', 'vue-router', 'vue-i18n'],

        eslintrc: {
          enabled: true,
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true
        },
        vueTemplate: true,
        // 导入函数类型声明文件路径 (false:关闭自动生成)
        dts: false
        // dts: "src/types/auto-imports.d.ts",
      }),

      vue(),
      visualizer({
        open: true, // 构建后自动打开浏览器
        gzipSize: true,
        brotliSize: true,
        filename: 'dist/report.html' // 打包分析报告输出位置
      }),
      !isProd && vueDevTools(),
      isProd && viteCompression()
    ].filter(Boolean),

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/variables.scss" as *;`
        }
      },
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 192, // 根据你的设计稿宽度调整
            propList: ['*'],
            minPixelValue: 2,
            mediaQuery: false,
            exclude: /node_modules/,
            replace: true
          })
        ]
      }
    },
    build: {
      sourcemap: !isProd,
      target: 'es2015',
      minify: 'esbuild',

      rollupOptions: {
        // 取消 external，全部打包进最终产物
        // external: [],

        // output: {
        //   globals: {},

        //   entryFileNames: 'assets/[name].[hash].js',
        //   chunkFileNames: 'assets/[name].[hash].js',
        //   assetFileNames: 'assets/[name].[hash].[ext]',
        // },
        rollupOptions: {
          manualChunks: (id: any) => {
            // 根据模块路径动态分配 chunk
            if (id.includes('vue')) {
              return 'vendor-vue'
            }
            if (id.includes('lodash')) {
              return 'vendor-lodash'
            }
            if (id.includes('axios')) {
              return 'vendor-axios'
            }
            // 可以根据其他条件继续添加逻辑
            return null // 如果不匹配任何条件，返回 null 表示不手动分配到任何 chunk
          }
        }
      }
    },

    server: {
      port: 3000,
      open: true,
      proxy: {
        '/api': {
          target: 'https://apis.tianapi.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }

    // 取消了 transformIndexHtml 插件，生产环境不再插入 CDN 资源
  }
})
